<template>
	<view>
		<view class="progress" :style="{ width: width + 'px', height: width + 'px' }">
			<view class="progress__bar" :style="{ background: `conic-gradient(${activeColor} ${currentValue}%, ${inactiveColor} ${currentValue}% 100%)` }" id="progress__bar"></view>
			<view class="circle" id="circle" :style="{ width: 'calc(100% - ' + borderWidth + 'px)', height: 'calc(100% - ' + borderWidth + 'px)',background:bgColor }"></view>
			<view class="circle1" :style="{ width: borderWidth / 2 + 'px', height: borderWidth / 2 + 'px' ,background:activeColor}"></view>
			<view class="circle2" :style="{ transform: `translateX(-50%) rotate(${currentValue * 3.6}deg)`, width: borderWidth / 2 + 'px' }">
				<view class="circle2-r" :style="{ width: borderWidth / 2 + 'px', height: borderWidth / 2 + 'px',background:activeColor }"></view>
			</view>
			<span class="progress__value flcenter" v-show="showValue" :style="{color:valueColor,fontSize:(valueFontSize+'px'),fontWeight:valueFontWeight}">
				<span style="font-size:20rpx;color:#666666">{{midValue}}</span>
			{{ currentValue }}%
			</span>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		activeColor: {
			default: '#009dff',
			type: String
		},
		showValue:{
			default:true,
			type:Boolean
		},
		valueColor:{
			default: '#009dff',
			type: String
		},
		valueFontWeight:{
			default: 600,
			type: Number
		},
		valueFontSize:{
			default: 18,
			type: Number
		},
		inactiveColor: {
			default: '#ececec',
			type: String
		},
		bgColor: {
			default: '#ffffff',
			type: String
		},
		duration: {
			default: 900,
			type: Number
		},
		progress: {
			default: 0,
			type: Number
		},
		width: {
			default: 100,
			type: Number
		},
		borderWidth: {
			default: 18,
			type: Number
		}, 
		done:{
			default:()=>{},
			type:Function
		},
		midValue: {
			default: '达成率',
			type: String
		},
	},
	data() {
		return {
			currentValue: 0,
			startTime: 0,
			inter: null
		};
	},
	watch: {
		progress() {
			this.progress = parseInt(this.progress);
			this.startCount();
		}
	},
	created() {
		if (this.progress > 0) {
			this.startCount();
		}
	},
	methods: {
		startCount() {
			this.reset(); 
			this.updateValue();
		}, 
		reset() {
			this.startTime = 0;
			this.currentValue = 0;
			this.duration = parseInt(this.duration);
			clearTimeout(this.inter);
			this.inter = null;
		}, 
		updateValue(timestamp = 30) {
			if (this.currentValue > this.progress) return;
			if (!this.startTime) this.startTime = timestamp;
			const progress = (timestamp - this.startTime) / (this.duration + 1000);
			this.currentValue = Math.min(this.currentValue + Math.floor((this.progress - this.currentValue) * this.easeOutCubic(progress)), this.progress);
			if (progress < 1) {
				this.inter = setTimeout(() => {
					this.updateValue(Date.now());
				}, 16);
			} else {
				this.currentValue = this.progress;
				this.loadComplete();
			}
		}, 
		//加载完成
		loadComplete() {  
			this.$emit('done',this.progress) 
		}, 
		easeOutCubic(x) {
			return 1 - Math.pow(1 - x, 2);
		}
	}
};
</script>

<style lang="less" scoped>
.progress {
	position: relative;
	color: #000;
	.circle {
		position: absolute;
		width: 80%;
		height: 80%;
		left: 50%;
		top: 50%;
		background: #fff;
		transform: translateX(-50%) translateY(-50%);
		border-radius: 50%;
		// z-index: 99;
		transition: 0.2s;

		&.done {
			width: 0%;
			height: 0%;
		}
	}

	.circle1 {
		position: absolute;
		width: 10%;
		height: 10%; 
		border-radius: 50%;
	}

	.circle2 {
		height: 100%;
		width: 10%;
		left: 50%;
		position: absolute;
		border-radius: 50%;
		.circle2-r { 
			position: absolute;
			top: 0;
			left: 0;
			border-radius: 50%;
		}
	}

	.circle1 {
		top: 0;
		left: 50%;
		transform: translateX(-50%);
	}
}

.progress__bar {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%; 
	background-size: contain;
	background-origin: border-box;
	background-clip: content-box;
	transition: 0.5s ease-out;
	/* mask: radial-gradient(transparent, transparent 59.5%, #fff 40.5%, #fff 0); */

	&.done {
		background: #34d190 !important;

		&.fail {
			background: #ff4a32 !important;
		}
	}
}

.progress__value {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 24px;
	// z-index: 999; 
}

.flcenter{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
</style>
